<template>
    <div class="it-code h-full dis-flex ">
      <div class="w-200px">
        <el-autocomplete
            v-model="dsName"
            value-key="dsName"
            size="mini"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入内容"
            @select="handleSelect"
        >
          <template v-slot:default="{item,$index}">
            <div class="name">{{ item.dsName }}</div>
          </template>
        </el-autocomplete>
        <div class="local-h-full " v-if="isLoadTree">
          <el-tree
                   size="mini"
                   nodeKey="label"
                   ref="tree"
                   @node-click="nodeClickCallback"
                   @node-expand="nodeOpenCallback"
                   :lazy="true"
                   :load="loadNode"
                   :props="defaultProps" ></el-tree>
        </div>
      </div>
      <div class="w-full flex-1" style="margin-left: 10px">
        <el-tabs type="border-card" class="h-full"  v-model="tabsValue" >
          <el-tab-pane label="表" name="table">
            <ITTable :data="tableList" @buildCode="buildCode" :ds-id="currentDb.dsId"></ITTable>
          </el-tab-pane>
          <el-tab-pane label="表字段" name="code">
            <BuildCode :table-name="[currentTb]"
                       :data-base-name="dsName"
                       :ds-id="currentDb.dsId"
                       :tabs-value="tabsValue"></BuildCode>
          </el-tab-pane>
          <el-tab-pane label="可视化开发" name="vscode"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
</template>

<script>
import Service from "api/Service";
import http from "network/http";
import ApiResponse from "utils/ApiResponse";
import ITTable from "views/admin/it/components/ITTable";
import BuildCode from "views/admin/it/components/BuildCode.vue";
export default {
  name: "ITCode" ,
  components:{
    ITTable ,BuildCode
  },
  data(){
    return {
      databases: [],
      currentTb: '' ,
      tabsValue: 'table' ,
      dsName: '',
      dbList:[],
      tableList: [] ,
      defaultProps: {
        children: 'children',
        label: 'label',
        isLeaf: 'isLeaf'
      },
      isLoadTree: false ,
      currentDb:{},
      checkTableNames:[] ,
      api:{
        DB: `/${Service.itToolService}/toolDs/queryDatabaseList` ,
        TB: `/${Service.itToolService}/toolDs/queryTableList` ,
        DS: `/${Service.itToolService}/toolDatasource/list`
      }
    }
  },
  mounted() {
    this.loadAllDs() ;
  },
  methods:{
    buildCode(tableNames){
      this.checkTableNames = tableNames ;
    },
    handleSelect(data){
      if(this.currentDb.dsName !== data.dsName){
        this.currentDb = data ;
        this.dsName = data.dsName ;
        this.isLoadTree = false ;
        this.$nextTick(()=>{
          this.isLoadTree = true ;
        })
      }

    },
    querySearchAsync(queryString, cb) {
      let databases = this.databases;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(databases);
      }, 200);
    },
    nodeClickCallback(data,node){
      if(data.isLeaf){
        this.currentTb = data.label
      }
    },
    nodeOpenCallback(data,node){
      this.tableList = node.childNodes.map(n=>n.data)
    },
    loadNode(node, resolve){
      let data = null ;
      if(this.databases.length === 0){
        return resolve([])
      }
      if(node.level === 0 ){
        let url = this.api.DB ;
        data = {
          dsId: this.currentDb.dsId
        }
        this.request(url, data,(data)=>{
          return resolve(data)
        })
      }else if(node.data.type === "DB"){
        data = {
          dsId: node.data.id ,
          dataBaseName: node.data.label
        }
        this.request(this.api.TB, data,(data)=>{
          this.tableList = data ;
          return resolve(data)
        })
      }else{
        return resolve([])
      }

    },
    loadAllDs(){
      return http.post(this.api.DS,{}).then(res=>{
        ApiResponse.init(res).ok((data)=>{
          this.databases = data ;
          if(data.length > 0){
            this.currentDb = data[0] ;
            this.dsName = data[0].dsName
          }
          this.isLoadTree = true ;
        })
      })
    },

    loadDbList(data){
      http.post(this.api.DB,data).then(res=>{
        ApiResponse.init(res).ok((data)=>{
          this.dbList = data ;
        })
      })
    },
    request(url , data , callback){
      http.post(url,data).then(res=>{
        ApiResponse.init(res).ok((data)=>{
          callback(data)
        })
      })
    }
  }
}
</script>

<style scoped>
 .local-h-full{
   height: calc(100vh - 243px);
   overflow: auto;
 }
 .right-line{
   border-right: 1px solid #2b2b2b;
 }
</style>
